<!doctype html>
<html>
<head>
<title>Menu Visual Test: Default</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"
	type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.8.2.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript"
	src="../../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript"
	src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
	$(function() {
		$.fn.themeswitcher && $('<div/>').css({
			position: "absolute",
			right: 10,
			top: 10
		}).appendTo(document.body).themeswitcher();
		
		var menus = $("#menu1, #menu2").menu({
			selected: function(event, ui) {
				$("#log").append("<div>Selected " + ui.item.text() + "</div>");
			}
		}).hide();
		
		
		$("button").click(function(event) {
			// TODO required to prevent the click handler below from handling this event
			event.stopPropagation();
			$("#menu" + this.id).menu("deactivate").show().position({
				my: "left top",
				at: "right top",
				of: event.pageX > 0 ? event : this
			});
			$(document).one("click", function() {
				menus.hide();
			})
		}).keydown(function(event) {
			var menu = $("#menu" + this.id).data("menu");
			if (menu.widget().is(":hidden"))
				return;
			event.stopPropagation();
			switch (event.keyCode) {
			case $.ui.keyCode.PAGE_UP:
				menu.previousPage();
				break;
			case $.ui.keyCode.PAGE_DOWN:
				menu.nextPage();
				break;
			case $.ui.keyCode.UP:
				menu.previous();
				break;
			case $.ui.keyCode.DOWN:
				menu.next();
				event.preventDefault();
				break;
			case $.ui.keyCode.ENTER:
			case $.ui.keyCode.TAB:
				menu.select();
				menu.widget().hide();
				event.preventDefault();
				break;
			case $.ui.keyCode.ESCAPE:
				menu.widget().hide();
				break;
			default:
				clearTimeout(menu.filterTimer);
				var prev = menu.previousFilter || "";
				var character = String.fromCharCode(event.keyCode);
				var skip = false;
				if (character == prev) {
					skip = true;
				} else {
					character = prev + character;
				}
				
				var match = menu.widget().children("li").filter(function() {
					return new RegExp("^" + character, "i").test($(this).text());
				});
				var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
				if (!match.length) {
					character = String.fromCharCode(event.keyCode);
					match = menu.widget().children("li").filter(function() {
						return new RegExp("^" + character, "i").test($(this).text());
					});
				}
				if (match.length) {
					menu.activate(match);
					if (match.length > 1) {
						menu.previousFilter = character;
						menu.filterTimer = setTimeout(function() {
							delete menu.previousFilter;
						}, 1000);
					} else {
						delete menu.previousFilter;
					}
				} else {
					delete menu.previousFilter;
				}
			}
		});
	});
	</script>
<style>
body {
	font-size: 62.5%;
}

.ui-menu {
	width: 200px;
	position: absolute;
}

#menu2 {
	height: 200px;
	overflow: auto;
}
</style>
</head>
<body>

	<button id="1">Show context menu 1</button>

	<ul id="menu1">
		<li><a href="#">Amsterdam</a></li>
		<li><a href="#">Anaheim</a></li>
		<li><a href="#">Cologne</a></li>
		<li><a href="#">Frankfurt</a></li>
		<li><a href="#">Magdeburg</a></li>
		<li><a href="#">Munich</a></li>
		<li><a href="#">Utrecht</a></li>
		<li><a href="#">Zurich</a></li>
	</ul>

	<ul id="menu2">
		<li><a href="#">Aberdeen</a></li>
		<li><a href="#">Ada</a></li>
		<li><a href="#">Adamsville</a></li>
		<li><a href="#">Addyston</a></li>
		<li><a href="#">Adelphi</a></li>
		<li><a href="#">Adena</a></li>
		<li><a href="#">Adrian</a></li>
		<li><a href="#">Akron</a></li>
		<li><a href="#">Albany</a></li>
		<li><a href="#">Alexandria</a></li>
		<li><a href="#">Alger</a></li>
		<li><a href="#">Alledonia</a></li>
		<li><a href="#">Alliance</a></li>
		<li><a href="#">Alpha</a></li>
		<li><a href="#">Alvada</a></li>
		<li><a href="#">Alvordton</a></li>
		<li><a href="#">Amanda</a></li>
		<li><a href="#">Amelia</a></li>
		<li><a href="#">Amesville</a></li>
		<li><a href="#">Aberdeen</a></li>
		<li><a href="#">Ada</a></li>
		<li><a href="#">Adamsville</a></li>
		<li><a href="#">Addyston</a></li>
		<li><a href="#">Adelphi</a></li>
		<li><a href="#">Adena</a></li>
		<li><a href="#">Adrian</a></li>
		<li><a href="#">Akron</a></li>
		<li><a href="#">Albany</a></li>
		<li><a href="#">Alexandria</a></li>
		<li><a href="#">Alger</a></li>
		<li><a href="#">Alledonia</a></li>
		<li><a href="#">Alliance</a></li>
		<li><a href="#">Alpha</a></li>
		<li><a href="#">Alvada</a></li>
		<li><a href="#">Alvordton</a></li>
		<li><a href="#">Amanda</a></li>
		<li><a href="#">Amelia</a></li>
		<li><a href="#">Amesville</a></li>
	</ul>

	<div class="ui-widget" style="margin-top: 2em; font-family: Arial">
		Log:
		<div id="log" style="height: 400px; width: 300px; overflow: auto;"
			class="ui-widget-content"></div>
	</div>

	<button id="2">Show context menu 2</button>

</body>
</html>
